<template>
  <div>
    <el-form :inline="false" class="m-form" ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item class="m-form-item" label="文章" prop="f_articleId">
        <el-select :readonly="viewer" v-model="form.f_articleId" placeholder="请选择文章" @change="handleChange">
          <el-option
            v-for="item in articleList"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="m-form-item" label="备注" prop="f_remark">
        <el-input type="textarea" v-model="form.f_remark" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { list as listArticle } from '@/api/cms/cms.article.service.js'
export default {
  name: 'LeaveForm',
  props: {
    value: {
      type: Object,
      default() {
        return {}
      }
    },
    viewer: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        f_articleId: undefined,
        f_articleTitle: '',
        f_remark: ''
      },
      rules: {
        f_articleId: [
          { required: true, message: '文章ID不能为空', trigger: 'blur' }
        ],
        f_articleTitle: [
          { required: true, message: '文章标题不能为空', trigger: 'blur' }
        ]
      },
      articleList: []
    }
  },
  watch: {
    value: {
      handler(n) {
        this.form = n
      },
      deep: true
    }
  },
  mounted() {
    listArticle({
      m_IN_status: this.viewer ? undefined : [1, 4],
      pageNum: 1,
      pageSize: 100
    }).then(res => {
      if (res.code === 0) {
        this.articleList = res.data.rows
      }
    })
  },
  methods: {
    validate(callback) {
      return this.$refs['form'].validate(callback)
    },
    resetFields() {
      this.$refs['form'].resetFields()
      this.$refs['form'].clearValidate()
    },
    handleChange(id) {
      const res = this.articleList.find(item => {
        return item.id === id
      })
      if (res) {
        this.form.f_articleTitle = res.title
      }
    }
  }
}
</script>
